<template>
	<view>
		<!-- 轮播图 -->
		<swiper :autoplay="true" :interval="3000" :duration="1000" style="height: 210px;">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="" class="swiper-img"></image>
				</view>
			</swiper-item>
		</swiper>

		
		<!-- 宫格 -->
			<uni-grid :column="5" :showBorder="false">
				<uni-grid-item v-for="(item,index) in gridList" :key="index">


					<img class="grid-img" :src="item.img"></img>
					<!-- 		<text class="img-text">{{item.name}}</text> -->

				</uni-grid-item>

			</uni-grid>
		

		<!-- 滑动分类 -->
		<view class="menu-wrap" :style="{'top':topHeight}">
			<scroll-view :scroll-x="true" :show-scrollbar="false"> <text v-for="(item,index) in menuList" :key="index" @tap="menuClick(item.category)"
				 :class="(item.category===category)?'menu-item-active':'menu-item'">
					{{item.title}}
				</text></scroll-view>

		</view>

		<view>
			<!-- 商品列表区域 -->
			<goodslist :goodslist="goodslist"></goodslist>
		</view>



	</view>
</template>

<script>
	
	import {mapState,mapGetters,mapMutations,mapActions} from "vuex";
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid/uni-grid-item.vue"
	import goodslist from "@/components/goods/goods-list.vue"
	export default {

		components: {
			uniGrid,
			uniGridItem,
			goodslist
		},
		data() {
			return {
				goodslist: [], //商品列表
				swiperList: [], //轮播图列表
				gridList: [], //宫格列表
				menuList: [],
				topHeight: "0px",
				pageindex: 0,
				category: "all", //商品分类
				isload: true //是否加载更商品
			}
		},
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:"../../components/search"
			})
		},
		
		computed:{
			    ...mapGetters("cart", ["selectedcount"])
		},
		methods: {
			...mapMutations("cata",["setAllCategory","setallcategoryinfo"]),
			menuClick(category) {
				this.category = category;
				this.isload = true,
					this.goodslist = [],
					this.pageindex = 0;
				this.getproducts(category)

			},
			//获取商品
			getproducts(category) {
				uni.request({
					url: this.$apiServer+"api/getproducts",
					data: {
						category: this.category,
						pageindex: this.pageindex,
						limit: 10,
					},
					success: (res) => {
						//没有更多数据
						if (res.data.message.length == 0) {
							uni.showToast({
								title:"没有更多数据了!",
								icon:"none"
							})
							this.isload = false
						}

						// this.goodslist=this.goodslist.concat(res.data.message);
						this.goodslist = [...this.goodslist, ...res.data.message];


					}
				})
			},
			
			setbarbadge(){
				if(this.selectedcount!=0){
					
					uni.setTabBarBadge({
							index:2,
							text:`${this.selectedcount}`
						})
					}
			
			}
		
			

		},
		
	watch: {
		selectedcount(newValue, oldValue) {

			this.setbarbadge()
		}
	},
		onLoad() {
		
		
			let h = uni.getSystemInfoSync();
			this.topHeight = `${h.windowTop-2}px`;

			this.getproducts(this.category)
			// uni.request({
			// 		url:"http://localhost:8083/api/goods/getallgoods",
			// 		success:(res)=> {
			// 			this.goodslist=res.data.message;

			// 		}
			// })

			//获取菜单分类
			uni.request({
				url: this.$apiServer+"api/getslidercategory",
				success: (res) => {
		
					//手动补齐全部
					res.data.message.unshift({
						category: "all",
						id: 0,
						title: "全部"
					})
					this.menuList = res.data.message;
				}
			})

			//获取轮播图
			uni.request({
				url: this.$apiServer+"api/getlunbo/",
				success: (res) => {
					this.swiperList = res.data.message;

				}
			})

			//获取九宫格
			uni.request({
				url: this.$apiServer+"api/getgrid/",
				success: (res) => {
					this.gridList = res.data.message;

				}
			}),
			
	
			
			uni.request({
				url:this.$apiServer+"api/getallcategory",
				success: (res) => {
					
					let allcategory=[];
					res.data.message.forEach((item,i)=>{
						const t={
							text:item.category
						}
						allcategory.push(t);
					})
					
				
						this.setAllCategory(allcategory)
				}
			}),
			
		
			uni.request({
				url: this.$apiServer+"api/getallcategoryinfo",
				success: (res) => {
			
				this.setallcategoryinfo(res.data.message)
					
				}
			})
		
			this.setbarbadge()
		},
		//上拉加载更多
		onReachBottom() {
			if (!this.isload) {
				uni.showToast({
					title:"没有更多数据了!",
					icon:"none"
				})
				return;
			}
			this.pageindex++;
			this.getproducts(this.category);
		},
		onNavigationBarButtonTap(e) {
			if(e.index==1){
				uni.scanCode({
					success(res) {
						plus.runtime.openURL(res.result)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.swiper-img {
		width: 100%;
		height: 205px;
	}

	.grid-img {
		width: 100%;
		/* 		margin-left: 15px;
		margin-bottom: 5px; */
	}

	.img-text {
		font-size: 14px;
		vertical-align: middle;
		line-height: 32px;
		margin-left: 5px;
	}

	.menu-wrap {
		position: sticky;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 35px;
		background-color: #f2f2f2;
		color: rgb(84, 84, 84);
		white-space: nowrap;

	}


	.menu-item {
		font-size: 16px;
		line-height: 35px;
		padding: 0 14px;


	}

	.menu-item-active {
		font-size: 16px;
		line-height: 35px;
		padding: 0 14px;
		color: rgb(237, 91, 0);
		border-bottom: 2px solid rgba(237, 91, 0);

	}
</style>
